<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="layout" content="template" />
<title>Project List</title>
<r:require module="HolderJS" />
</head>
<body>
	<div class="container" style="margin-top: 20px;">

		<div class="offset1 span10" style="text-align: left">
			
			<g:set var="breaks" value="${true}"/>
			<g:each in= "${roles}" var= "role">
				<g:if test="${role == "ROLE_USER" && breaks == true}">
					<a class="btn btn-info" id="createProject" style="margin-left: 340px;">Create New Project</a>
					<g:set var="breaks" value="${false}"/>
				</g:if>
			</g:each>
			
			<g:each status="i" in="${projects }" var="project">

				<div id="project-${project.id }" class="panel span8">
					<div class="media">
						<div class="pull-left media-action">
							<img style="width: 150px; height: 150px;"
								class="media-object img-polaroid"
								src="${resource(dir : 'images/imageProject/', file : project.imagePath, absolute : 'true') }">
								<p>
									<a style="margin-top: 5px" id="ud-project-${project.id}" href="#"	
										class="btn btn-info input-block-level text-left"><i
										class="icon-pencil icon-white"></i> Edit</a> <a style="margin-top: 5px" 
										id="dl-project-${project.id }" href="#"
										class="btn btn-danger input-block-level"> <i
										class="icon-remove icon-white"></i> Delete
									</a>
								</p>
							
						</div>
						<div class="media-body offset2">
							<h2 class="media-heading">
								#${project?.id } Project
								${project?.projectName }
							</h2>
							<hr />
							<p>
								<strong>Owner:</strong>
								${project?.owner.firstName +" "+ project?.owner.lastName }
							</p>
							<p>
								<strong>Assigned Team:</strong>
								<g:each status="j" in="${project.teamProjects }"
									var="teamProject">
									<g:if test="${teamProject.endDate == null}">
										<span id="dl-text-team-${teamProject.team.id}-${project?.id}">
											${teamProject.team.teamName}
										</span>
										<g:if test="${j != project.teamProjects.size() - 1 }">,</g:if>
									</g:if>
								</g:each>
							</p>
							<p>
								<strong>Project Description:</strong>
							</p>
							<p>
								${project.description }
							</p>


							<div id="teamList">
								<table class="table table-bordered table-striped"
									style="width: 500px">
									<thead>
										<tr>
											<th>Team Name</th>
											<th>Mail Group</th>

										</tr>
									</thead>
									<tbody>
										<g:each in="${project?.teamProjects}" var="team">
											<g:if test="${team.endDate == null}">
												<tr id="team-${team.team.id}-${project?.id}">
													<td>
														${team.team.teamName}
													</td>
													<td>
														${team.team.mailGroup}
													</td>

												</tr>
											</g:if>
										</g:each>
									</tbody>
								</table>
							</div>
						</div>

					</div>
				</div>


			</g:each>


		</div>

	</div>
	<div id="delete-modal" class="modal hide fade" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">×</button>
			<h3 id="myModalLabel">Notice</h3>
		</div>
		<div class="modal-body">
			<p>Are you sure to remove this project from system?</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="button" id="btnDeleteProject" class="btn btn-primary"
				data-loading-text="Processing...">OK</button>
		</div>
	</div>

	<%-- Create Project	--%>
	<g:uploadForm name="myProjectCreate" controller="project" action="save">
		<div style="width: 630px; text-align: left" id="create_modal"
			class="modal hide fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Create Project</h3>
			</div>
			<div class="modal-body">
				<label>Project Name</label>
				<g:textField name="projectName" id="projectNamec"
					placeholder="Project Name" class="input-block-level" />

				<label>Description</label>
				<g:textArea name="description" placeholder="Project Description"
							rows="5" class="input-block-level" id="descriptionc"/>
				

				<label>Image</label>
				<input type="file" name="imagePath" id="imagePath" class="input-block-level" style="background-color: #fcfcfc; border: 1px solid #cccccc;" />
				<div id="imageExt"></div>
				<label class="checkbox"> <g:checkBox name="isPublic" id="isPublicc" value="${false}" /> Public</label>
				<div id="teamList">
					<table class="table table-bordered table-striped">
						<thead>
							<tr>
								<th><input type="checkbox" id="checkAll" name="checkAll"/></th>
								<th>Team Name</th>
								<th>Mail Group</th>
							</tr>
						</thead>
						<g:each var="team" in="${myvalue}">
							<tr>
								<td><g:checkBox name="myCheckbox" id="myCheckboxc"
										class="classCheckbox" value="${team.id}" checked="false" /></td>
								<td>
									${team.teamName}
								</td>
								<td>
									${team.mailGroup}
								</td>
							</tr>
						</g:each>
					</table>
				</div>

			</div>
			<div class="modal-footer">
				<g:submitButton name="submitProject" id="submitProjectc" class="btn btn-primary" value="Submit"/>
				<input type="reset" value="Reset" class="btn btn-default" />
			</div>
		</div>

	</g:uploadForm>

	<%-- End Create Project--%>

	<%-- Update Project	--%>

	<g:uploadForm name="myProjectUpdate" controller="project"
		action="update">
		<div style="width: 650px; text-align: left" id="update_modal"
			class="modal hide fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Update Project</h3>
			</div>
			<div class="modal-body">

				<div class="media">
					<div id="dimage" class="pull-left"></div>
					<div class="media-body">
						<g:hiddenField name="id" />
						<label>Project Name</label>
						<g:textField name="projectName" placeholder="Project Name"
							class="input-block-level" />

						<label>Description</label>

						<g:textArea name="description" placeholder="Project Description"
							rows="5" class="input-block-level" />
						<label>Image</label> <input type="file" name="imagePath"
							class="input-block-level"
							style="background-color: #fcfcfc; border: 1px solid #cccccc;" />
						<label class="checkbox"> <input type="checkbox" name="isPublic" id="isPublic" /> Public
						</label>
					</div>
					<div id="teamList">

						<table class="table table-bordered table-striped" id="teams"
							style="width: 560px">
							<thead>
								<tr>
									<th><input type="checkbox" id="checkAllu" name="checkAll"/></th>
									<th>Team Name</th>
									<th>Mail Group</th>
								</tr>
							</thead>
							<tbody>
								<g:each var="team" in="${myvalue}">
									<tr>

										<td><g:checkBox name="myCheckbox" class="classCheckboxu"
												value="${team.id}" checked="false" /></td>
										<td>
											${team.teamName}
										</td>
										<td>
											${team.mailGroup}
										</td>

									</tr>
								</g:each>
							</tbody>
						</table>
					</div>

				</div>



			</div>
			<div class="modal-footer">
				<g:submitButton name="submitProject" id="submitProjectu" data-loading-text="Updating..."
					class="btn btn-primary" value="Submit" />
				<button class="btn btn-default" data-dismiss="modal"
					aria-hidden="true">Cancel</button>
			</div>
		</div>
	</g:uploadForm>
	<%--End Update Project	--%>

	<%-- Delete Team--%>
	<div id="delete-team-modal" class="modal hide fade" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabelTeam" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">×</button>
			<h3 id="myModalLabelTeam">Notice</h3>
		</div>
		<div class="modal-body">
			<p>Are you sure to remove this team in project?</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="button" id="btnDeleteTeam" class="btn btn-primary"
				data-loading-text="Processing...">OK</button>
		</div>
	</div>

	<%-- End Delete Team--%>

	<script type="text/javascript">
		jQuery(document).ready(function( $ ) {

			var projectID = null;
			
			$("a[id^='dl-project-']").on("click", function() {
				$("#delete-modal").modal('show');		
				projectID = $(this).attr("id").split("-")[2]; // Get project ID
			});
			
			$("#delete-modal").find("#btnDeleteProject").on("click", function() {

				var removeURL = "${createLink(controller : 'project', action : 'removeProjectById', absolute : 'true')}"
		

												$.post(	removeURL,
																{
																	'projectID' : projectID
																})
														.done(
																function(data) {
																	$("#delete-modal").modal('hide');
																	$("#project-"+ projectID).fadeOut();
																});

											});

				<%--Update Project			--%>
					$('a[id^="ud-project-"]').on("click",function(){
						projectID = $(this).attr("id").split("-")[2];
						$.ajax({
							url: '${g.createLink(controller: 'project', action: 'findProject')}',
							dataType: 'json',
							data: {
								projectIDs: projectID
							},
							success: function(data){
								$("#id").val(data.dtproject.id);
								$("#projectName").val(data.dtproject.projectName);
								$("#description").val(data.dtproject.description);
								var htmlPrepare = '<img style="height:160px; width:160px" class="media-object img-polaroid" src="${resource(dir : "images/imageProject/", absolute : true)}'+data.dtproject.imagePath+'"/>';
								$("#dimage").html(htmlPrepare);
								
								if(data.dtproject.isPublic){
									$('#isPublic').attr('checked', true);
								}
								else{
									$('#isPublic').attr('checked', false);
								}

								$("#teams tbody tr").each(function(index,object){
									var teamId = $(object).find(":checkbox").val();
									for(var i = 0 ; i< data.dtteam.length ; i++){
										if(teamId == data.dtteam[i]){
											 $(object).find(":checkbox").attr("checked",true);
										}
									}
								});								
							}
					});
						
					$('#update_modal').modal("show");
					});
				<%-- End Update Project	--%>

				<%--Create Project--%>
				$('#createProject').click(function(){
					$('#create_modal').modal('show');
				});


				$('#submitProjectc').click(function(){
					$('#myProjectCreate').validate({
						highlight: function(element, errorClass){
							$(element).fadeOut(function(){
								$(element).fadeIn();
							});
						},
						rules: {
							projectName: {
								required: true,
								remote: {
									url: '${g.createLink(controller: 'project', action: 'checkExistProject')}',
									dataType: 'json',
									type: 'GET',
									data: {
										projectName: function(){
											return $("#projectNamec").val();
										}
									}
									
								}
							},
							description: {
								required: true 
							},
							imagePath: {
								accept: "png|jpeg|gif|jpg",
								filesize: 1048576
							}
						},
						messages: {
							projectName: {
								required: "<div class='alert alert-error'>Please enter your Project Name</div>",
								remote: jQuery.validator.format("<div class='alert alert-error'>{0} is already taken.</div>")
							},
							description: "<div class='alert alert-error'>Please enter your Description</div>",
							imagePath: "<div class='alert alert-error'>File must be JPG, GIF or PNG, less than 1MB</div>"
						},
						submitHandler: function(form)
			             {
			                form.submit();
			             }
					});
						
				});

				$('#submitProjectu').click(function(){
					$('#myProjectUpdate').validate({
						rules: {
							projectName: {
								required: true
							},
							description: {
								required: true 
							},
							imagePath: {
								accept: "png|jpeg|gif|jpg",
								filesize: 1048576
							}
						},
						messages: {
							projectName: {
								required: "<div class='alert alert-error'>Please enter your Project Name</div>"
							},
							description: {
								required: "<div class='alert alert-error'>Please enter your Description</div>"
							},
							imagePath: "<div class='alert alert-error'>File must be JPG, GIF or PNG, less than 1MB</div>"
								
							
						},
						submitHandler: function(form)
			             {
			                form.submit();
			             }
					});
						
				});
				$("#checkAll").click(function(){
					if($("#checkAll").is(':checked')){
						$('.classCheckbox').prop("checked", true);
					}
					else { 
						$('.classCheckbox').prop("checked", false);
					}
				});

				$("#checkAllu").click(function(){
					if($("#checkAllu").is(':checked')){
						$('.classCheckboxu').prop("checked", true);
					}
					else { 
						$('.classCheckboxu').prop("checked", false);
					}
				});
				<%--End create project--%>

				

				

});
	</script>
</body>
</html>

